<template>
   <div class="top">
      <div class="top-content">
         <ul class="left">
            <li v-for="item of list1" :key="item.id">
               <router-link to="">
                  {{item.item}}
               </router-link>
            </li>
         </ul>

         <ul class="right">
            <li v-for="item of list2" :key="item.id">
               <i v-if="item.id === 10" class="icon el-icon-mobile-phone"></i>
               <router-link to="">
                  {{item.item}}
               </router-link>
            </li>
         </ul>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'headerTop',
      data() {
         return {
            list1: [
               {
                  id: 1,
                  item: '商城'
               },
               {
                  id: 2,
                  item: '魅族'
               },
               {
                  id: 3,
                  item: '魅蓝'
               },
               {
                  id: 4,
                  item: 'Flyme'
               },
               {
                  id: 5,
                  item: '云服务'
               },
               {
                  id: 6,
                  item: '专卖店'
               },
               {
                  id: 7,
                  item: '服务支持'
               },
               {
                  id: 8,
                  item: '社区'
               }
            ],
            list2: [
               {
                  id: 9,
                  item: 'Select Region'
               },
               {
                  id: 10,
                  item: ' APP下载'
               }
            ]
         }
      }
   }
</script>

<style scoped lang="stylus">
   @import "../../assets/stylus/common.styl"
   .top
      widthHeight(100%, 29px)
      background #484848
      .top-content
         widthHeight(1240px, 29px)
         margin 0 auto
         ul
            height 100%
            display flex
            align-items center
            li:not(:last-child)
               margin-right 20px
            a
               font-size 14px
               color #aaa
               vertical-align top
   .left
      float left
   .right
      float right
      .icon
         color #fff
</style>
